<script setup lang="ts">
import { ref } from 'vue'
import radioCell from '@/components/radio-cell.vue'

const emit = defineEmits(['close', 'transfer-fee'])
const show = ref(false)
defineExpose({
  show,
})

const editRef = ref()
const formModel = ref({
  balance: 0,
  money: 0,
})

function handleSubmit() {
  editRef.value.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log('表单验证通过')
      // 提交表单逻辑
      emit('close', false)
      show.value = false
    }
    else {
      console.log('表单验证不通过')
    }
  })
}
function handleClose() {
//   show.value = false

}

const list = [100, 200, 500, 1000, 2000, 5000]

function jumpTo(url: string) {
  uni.navigateTo({
    url,
  })
}
</script>

<template>
  <wd-popup v-model="show" lock-scroll position="bottom" :safe-area-inset-bottom="true" closable custom-style="height: 1170rpx;overflow: hidden;border-radius: 32rpx 32rpx 0 0;" @close="handleClose">
    <view class="wot-form-title">
      【 服务费充值 】
    </view>
    <scroll-view scroll-y>
      <wd-form ref="editRef" :model="formModel" class="form">
        <wd-cell-group border>
          <wd-input
            v-model="formModel.balance"
            label="服务费余额："
            label-width="100px"
            prop="name"
            clearable
            readonly
          />
          <wd-cell title="充值金额：" title-width="100px">
            <view class="inp-num">
              <wd-input-number v-model="formModel.money" input-width="70px" :step="5" custom-class="inp-num" />
            </view>
          </wd-cell>
        </wd-cell-group>
        <view>
          <wd-row :gutter="8">
            <wd-col v-for="item in list" :key="item" :span="8">
              <view class="money-item" @click="formModel.money = item">
                {{ item }}
              </view>
            </wd-col>
          </wd-row>
        </view>
        <view class="desc">
          注：请保持服务费为正数，尽量大于500元；当服务费小于10时，系统将收取一笔用户支付充值服务费！支付业务第三方支付公司收取0.6%手续费（微信、支付宝），我们将根据每笔支付成功时扣取您的服务费余额。
          <br>
          服务费扣费说明：支付金额单笔＜50，费率:0.006；支付金额单笔＞=50，费率：0.008
        </view>
        <view class="settings" @click="jumpTo('/pages-sub/mine/payFee')">
          充值服务费
        </view>
        <view class="settings" @click="emit('transfer-fee')">
          把服务费 转至 其他账户服务费
        </view>
        <view class="settings" @click="jumpTo('/pages-sub/mine/feeBalanceLog')">
          查看明细
        </view>
      </wd-form>
    </scroll-view>
  </wd-popup>
</template>

<style lang="scss" scoped>
.form {
  padding: 0 60rpx;
}
.desc{
    padding: 40rpx 20rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    color: #ED6A0C;
}
.footer{
  padding: 0 30rpx;

}
.inp-num {
  text-align: left;
  margin-bottom: 4rpx;
}
.money-item{
  height: 64rpx;
  line-height: 64rpx;
  text-align: center;
  font-size: 24rpx;
  color: #fff;
  background-color: $uni-color-secondary;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
}
.settings{
    font-size: 28rpx;
    color: #fff;
    font-weight: bold;
    background-color: $uni-color-primary;
    width: 80%;
    line-height: 62rpx;
    text-align: center;
    margin: 0 auto 20rpx;
    border-radius: 6rpx;
    cursor: pointer;
    &:active{
      background-color: #087bf9;
    }
}
</style>
